<template>
	<div class="login-wrapper">
		<h1>
			<img src="../assets/logo.png">
			<span>天津医科大学总医院</span>
		</h1>
		<div class="login-item">
			<div class="item-title">
				<span :class="{active: activeShow}" @click="navBar('1')">业务分析平台</span>
				<!-- <span :class="{active: !activeShow}" @click="navBar('2')">登录后台</span> -->
			</div>
			<div class="item-log">
				<div class="log" :style="{border:AccountNumberError ?'1px solid #DE5959':''}">
					<span class="icon">
						<img src="../assets/account.png">
					</span>
					<el-input placeholder="请输入账户名" v-model="loginName"></el-input>
				</div>
				<div class="log" :style="{border:PasswordError ?'1px solid #DE5959':' '}">
					<span class="icon">
						<img src="../assets/password.png">
					</span>
					<el-input placeholder="请输入密码" type="password" v-model="psd"></el-input>
					
				</div>
				<div class="errmsg" v-show="errShow">
					<img src="../assets/errmsg.svg"></img>{{errmsg}}
				</div>
				<el-button @click="login">登 &nbsp;&nbsp;录</el-button>
			</div>
		</div>
		<!-- <el-dialog title="提示" :visible.sync="dialogShow" width="30%" :before-close="handleClose">
  			<span>会话过期</span>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="dialogShow = false">确 定</el-button>
			</span>
		</el-dialog> -->
	</div>
</template>

<script>
import axios from 'axios'
	export default {
		data () {
			return {
				activeShow: true,
				psd: '',
				loginName: '',
				errShow: false,
				dialogShow: false,
				errmsg: '',
				type: 'dataSystem',
				PasswordError: false,  //标识密码错误
				AccountNumberError: false //标识账号错误
			}
		},
		created () {
		this.login()	
		},	
		methods: {
			navBar (type) {
				type === '1' ? this.activeShow = true : this.activeShow = false
				type === '1' ? this.type = 'dataSystem' : this.type = 'managerSystem'
			},
			login () {
				this.addLoginUser()
				// this.$router.push('/all')
			},
			addLoginUser () {
          var qs = require('qs');
          var self = this
          axios.post('/service', qs.stringify({"data": JSON.stringify({
              command: 'login',
              platform: 'web',
              loginName: this.loginName,
              psd: this.psd,
              type: this.type
             })}), {
              headers: {
               "BBG-Key": "ab9ef204-3253-49d4-b229-3cc2383480a6",
              }
             })
             .then(function (rep) {
              if (rep.data.statusCode === '10001') {
               // self.$message('添加成功')
               if (self.type == 'dataSystem') {
               		self.$router.push('/all')
               } 
               // else {
               // 		sessionStorage.clear()
               // 		sessionStorage.setItem("userName", rep.data.data.userInfo.name)
               // 		location.href="http://hospital.tzucpa.cn/back/#/main/医务处"
               // }
              	
              } else if(rep.data.statusCode === '00001') {
              	self.errShow = true
              	self.errmsg = rep.data.msg
				if(rep.data.msg == "电话号码错误"){
						self.AccountNumberError = true;
				}else if(rep.data.msg == "密码错误"){
						self.AccountNumberError = false;
						self.PasswordError = true;
				}
              }
             }).catch(function (error) {
              console.log(error);
             });
 			}
		}
	}
</script>
<style lang="scss">

	.login-wrapper{
		width: 100%;
		height: 100%;
		background: url('../assets/bg.png');
		background-size: cover;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		h1{
			position: absolute;
			left: 5%;
			top: 30px;
			display: flex;
			height: 48px;
			img{
				width: 48px;
				height: 48px;
				border-radius: 50%;
			}
			span{
				font-size: 16px;
				color: #fff;
				margin-left: 20px;
				line-height: 48px;
				display: inline-block;
			}
		}
		.login-item{
			width: 570px;
			height: 350px;
			background: #fff;
			.item-title{
				width: 100%;
				height:52px;
				line-height: 52px;
				text-align: center;
				font-size: 16px;
				display: flex;	
				span{
					display: inline-block;
					width: 100%;
					background: #F2F2F2;
					color: #9A9A9A;
					cursor: pointer;
					&:hover {
						background-color: #53B5E3;
						color: #fff;
					}
				}
			}
			.active{
				background: #47A4D0 !important;
				color: #fff !important;
			}
			.item-log{
				// display: flex;
				width: 100%;
				padding-top: 20px;
				.log{
					width: 350px;
					margin: 0 auto;
					height: 46px;
					margin-top: 30px;
					display: flex;
					border: 1px solid #DEDEDE;
					&:hover{
						border:1px solid #7DC3E4;
					}
					span{
						display: inline-block;
						width: 40px;
						// background: red;
						height: 36px;
						margin-top: 5px;
						position: relative;
						// display: flex;
						border-right: 1px solid #DEDEDE;
						img{
							position: absolute;
							left: 30%;
							top: 30%;
						}
					}
					.el-input{
						height: 46px !important;
						.el-input__inner{
					    height: 46px !important;
					    line-height: 46px !important;
					    border: none;
					  }
					}
					// align-items: center;
				}
				.errmsg {
					width: 350px;;
					font-family: PingFangSC-Regular;
					height: 20px;
					line-height: 20px;
					font-size: 12px;
					color: #DE5959;
					margin: 0 auto;
					padding-top: 10px;
					img {
						dispaly: inline-block;
						margin-right: 6px;
					}
				}
			}
		}
		.el-button{
			width: 350px;
			margin: 0 auto;
			display: block;
			margin-top: 30px;
			background: #7DC3E4;
			color: #fff;
			font-size: 18px;
			&:hover {
				background: #63B7DF 
			}
		}
	}

</style>